Modèle de flux d'écran
Valider les composants visuels de l'écran dans un flux utilisateur.
À propos du Modèle de Flux d'Écran
Les flux d'écran (également connus sous le nom de "wireflows") sont une combinaison de maquettes filaires et de la création d'un diagramme de flux. Le flux de bout en bout cartographie ce que les utilisateurs voient sur chaque écran et comment cela impacte leur processus de prise de décision à travers votre produit ou service. Avec ces informations en main, vous pouvez mieux expliquer les décisions que vous avez prises concernant votre design d'interaction.
Utilisez le modèle Screen Flow pour découvrir de nouvelles opportunités afin de rendre l'expérience utilisateur fluide et sans frustration, du début à la fin.
Si vous êtes intéressé par le développement de votre travail et que vous souhaitez vous lancer dans le domaine du design UX, où vous pouvez présenter le parcours utilisateur sous forme de diagramme de flux avec des textes et des symboles plutôt que des écrans, vous pourriez être intéressé par le Modèle de flux utilisateur.
Continuez à lire pour en savoir plus sur les flux d'écran.
Qu’est-ce qu’un flux d’écran ?
Un flux d'écran (ou wireflow) assemble une disposition multi-écrans, connectée comme un diagramme de flux pour cartographier les points de décision et les mouvements d'un client du début à la fin.
Les wireframes à eux seuls manquent de contexte pour montrer à quoi pourrait ressembler un flux utilisateur interactif, page par page. Les flux UX, à eux seuls, sont plus abstraits et ne peuvent pas montrer ce que votre client regarde réellement.
Les wireflows, ou flux d'écran, combinent les forces des deux méthodes et vous aident à démontrer comment ce que l'utilisateur voit a un impact important sur la façon dont il perçoit votre produit ou service.
Quand utiliser des flux d'écran
Les wireframes aident les équipes UX et produit à envisager le parcours client comme un flux complet plutôt qu'un ensemble d'écrans. Le wireflow ou le flow d'écran se concentre sur les écrans eux-mêmes et l'interaction du client avec votre service ou produit.
Un concepteur peut modéliser le flux d'écrans lorsqu'il en a besoin pour…
Assurez-vous qu'il ne manque aucun scénario : avec un parcours de bout en bout cartographié, vous pouvez envisager tous les cas d'utilisation potentiels qui répondent aux besoins du client.
Améliorez les interactions utilisateur : apprenez à connaître vos clients à chaque occasion dans le processus, comme les inscriptions, les confirmations ou les popups.
Créez une meilleure communication interfonctionnelle : rassemblez les designers et les développeurs, en les encourageant à penser à l'expérience globale plutôt qu'à des écrans séparés.
Engagez-vous dans l’éducation des parties prenantes : si les clients ou les équipes n'ont jamais envisagé ce que voit le client en utilisant votre produit ou expérience, suivre un flux aide à développer de l'empathie pour les points de douleur des clients.
Créez votre propre flux d'écrans
Faciliter le flux de votre écran est simple. La plateforme de collaboration virtuelle de Miro offre le canevas parfait pour les créer et les partager. Commencez par sélectionner le Modèle de Flow d'Écran, puis suivez les étapes suivantes pour créer le vôtre.
1. Définissez votre user story
Avant de commencer à cartographier une séquence visuelle, décrivez les besoins et les points de douleur de vos utilisateurs à résoudre. Ceci est votre base pour définir un point de départ pour votre flux d'écran.
2. Décidez ce que vos écrans principaux afficheront
Réfléchissez à vos points de départ et d'arrivée dans le parcours. Avez-vous besoin d'une page de destination ? Écran du formulaire d'inscription ? Page de confirmation ? Identifiez les changements ou les étapes supplémentaires du processus, comme les pages qui doivent être scindées ou les écrans qui doivent être ajoutés. Miro est le créateur de wireframe parfait avec une bibliothèque de wireframes qui comprend plus de 15 composants d'interface utilisateur que vous pouvez facilement ajouter à votre flux d'écran.
3. Connecter les écrans
Ajoutez et déplacez des flèches entre chaque écran pour faire avancer l'utilisateur dans la tâche, en utilisant l'outil de ligne de connexion de Miro. Vous pouvez également inclure des points de décision et montrer ce qui se passe dans chaque instance disponible à l'utilisateur.
4. Partagez le flux de votre écran avec votre équipe ou les parties prenantes pour obtenir des retours
Vous pouvez utiliser la fonctionnalité Mention de Miro pour étiqueter votre équipe ou des personnes individuellement pour des retours rapides, des critiques de design ou des révisions avant les sessions d'ateliers en direct avec les clients. Vous pouvez également partager votre tableau Miro avec n’importe qui (même s’ils ne sont pas encore inscrits !) en cliquant sur le bouton Inviter des membres.
Découvrez plus d'exemples de flux utilisateur pour vous aider à créer votre prochaine grande innovation.
Qu'est-ce qu'un flux d'écran UX ?
Un flux d'écran vous aide à analyser les interactions de vos utilisateurs, en se concentrant principalement sur les écrans de vos produits. Il combine le meilleur du wireframing et des diagrammes de flux, vous donnant un aperçu plus détaillé du flux de vos clients et, par conséquent, plus de données pour construire une meilleure expérience utilisateur.
Commencer avec ce modèle maintenant.
Modèle Wireframes Basse Fidélité
Idéal pour:
Desk Research, Product Management, Wireframes
Lorsque vous concevez un site ou créez une application, les premières étapes doivent être générales : il s'agit d'avoir une vue d'ensemble et de communiquer l'idée globale. Et c'est exactement le but des Wireframes Basse Fidélité : ces mises en page approximatives (que l'on pourrait assimiler à la version numérique du croquis sur un coin de table) aident vos équipes et les parties prenantes du projet à rapidement déterminer si une réunion de conception répond aux besoins de vos utilisateurs. Notre modèle vous permet de facilement utiliser des wireframes lors de réunions, d'ateliers, de présentations et de sessions de réflexion critique.
Modèle de Wireframe d'Application
Idéal pour:
UX Design, Wireframes
Prêt à commencer à créer une application ? Ne vous contentez pas d'imaginer comment elle fonctionnera et comment les utilisateurs interagiront avec elle, laissez un wireframe vous le montrer. Le wireframing est une technique permettant de créer une disposition de base de chaque écran. Lorsque vous procédez au wireframing, idéalement au début d'un processus, vous comprendrez ce que chaque écran accomplira et obtiendrez l'adhésion des parties prenantes importantes, le tout avant d'ajouter la conception et le contenu, ce qui vous fera gagner du temps et de l'argent. Et en pensant aux choses en termes de parcours utilisateur, vous offrirez une expérience plus convaincante et réussie.
Modèle de Croquis en Ligne
Idéal pour:
UX Design, Desk Research, Design Thinking
Avant d'aller de l'avant avec une idée prometteuse, examinez-la dans une vue d'ensemble pour savoir comment elle fonctionne et dans quelle mesure elle répond à vos objectifs. C'est ce que les croquis font. Ce modèle vous offre un puissant outil de collaboration à distance pour les premières étapes du prototypage, que vous dessiniez des pages Web et des applications mobiles, que vous conceviez des logos ou que vous planifiiez des événements. Ensuite, vous pouvez facilement partager votre croquis avec votre équipe et enregistrer chaque étape de votre croquis avant de le modifier et de le développer.
Modèle de Wireframe de site Web
Idéal pour:
Wireframes, Expérience client
Le wireframing est une méthode de conception d'un site Web au niveau structurel. Un wireframe est une mise en page stylisée d'une page Web présentant les éléments d'interface sur chaque page. Utilisez ce modèle de wireframe pour parcourir des pages Web rapidement et à moindre coût. Vous pouvez partager le wireframe avec des clients ou des collaborateurs et collaborer avec vos parties prenantes. Les wireframes permettent aux équipes d'obtenir l'adhésion des parties prenantes sans investir trop de temps ou de ressources. Ils contribuent à garantir que la structure et le flux de votre site Web répondront aux besoins et aux attentes des utilisateurs.